<script setup lang="ts">

import { Vue3Lottie } from 'vue3-lottie'
import DrawingLoading from '@/assets/anims/drawing_loading.json'
import DrawingCircleProgress from '@/components/DrawingCircleProgress.vue'

const props = defineProps({
  // 进度
  progress: { type: Number, default: 0.05 },
  // 当前队列
  inQueue: { type: Number, default: 0 },
  // 当前剩余时间（秒）
  remainingS: { type: Number, default: 0 },
  // 最大自动步进进度，默认步进到60%，不再自动增加让外部的进度驱动
  maxAutoProgress: { type: Number, default: 0.6 },
  // 自动步进值
  step: { type: Number, default: 0.001 },
  // 渐步器时间间隔
  stepIntervalMs: { type: Number, default: 150 }
})

const { progress, maxAutoProgress, step, stepIntervalMs, remainingS } = props

console.assert(progress >= 0 && progress <= 1, 'progress 必须是大于0且小于1的小数')
console.assert(maxAutoProgress >= 0 && maxAutoProgress <= 1, 'maxAutoProgress 必须是大于0且小于1的小数')
console.assert(step >= 0 && step <= 1, 'step 必须是大于0且小于1的小数')

// 最终计算的进度
const finalProgress = ref(progress)
// 最终的剩余秒数
const finalRemaining = computed<number>(oldValue => {
  return Math.max(props.remainingS, oldValue ?? 0)
})
// 队列
const finalInQueue = computed(() => {
  return props.inQueue > 10 ? '10+' : props.inQueue.toString()
})
// 显示队列
const showQueue = computed(() => finalInQueue.value != '0')
// 显示剩余时间
const showRemaining = computed(() => finalRemaining.value > 0)

// 步进器ID
let stepperId: number | undefined

onMounted(() => {
  watch(() => props.progress, value => {
    // 屏蔽掉小于当前进度的值
    if (value <= finalProgress.value) {
      return
    }
    finalProgress.value = Math.max(Math.min(value, 1), 0)
  })
  stepperId = setInterval(() => {
    finalProgress.value = Math.min(finalProgress.value + step, 1)
    // 当前进度大于等于最大进度则停止渐步器
    if (finalProgress.value >= maxAutoProgress) {
      clearInterval(stepperId)
    }
  }, stepIntervalMs)
})

onUnmounted(() => {
  clearInterval(stepperId)
})
</script>

<template>
  <div class="drawing-page">
    <DrawingCircleProgress :progress="finalProgress" />
    <p class="drawing-title">AI drawing now !</p>
    <p class="drawing-description">If there’re many people in queue, it may takes a few minutes.</p>
    <div class="drawing-progress">
      <div class="progress-item" :class="{'opacity-0': !showQueue}"><span class="value">{{ finalInQueue }}</span><span class="label">In queue</span></div>
      <div class="progress-item" :class="{'opacity-0': !showRemaining}"><span class="value">{{ finalRemaining }}s</span><span class="label">Remaining</span>
      </div>
    </div>
    <Vue3Lottie class="lottie-anim" :animation-data="DrawingLoading" width="45%" height="auto" />
  </div>
</template>

<style scoped>
.drawing-page {
  color: var(--color-primary);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 15px;

  .drawing-title {
    font-weight: 700;
    font-size: 1.6rem;
    margin-top: 30px;
    margin-bottom: 15px;
  }

  .drawing-description {
    font-size: 1rem;
  }

  .drawing-progress {
    display: flex;
    flex-flow: row;
    margin: 50px 0;
    column-gap: 5vh;

    .progress-item {
      display: flex;
      flex-flow: column;

      .value {
        font-weight: 800;
        font-size: 2rem;
      }

      .label {
        font-weight: 700;
        font-size: 1rem;
        opacity: 0.5;
      }
    }
  }
}
</style>